<template>
	<div @click="tapMask" class="reader-container">
    <ReadHeaderBar class="header-bar"
                    @onBack="onBack"
                    @onHome="onHome"
                    @onCollect="onCollect">
                      <span v-if="currentSections">{{currentSections[currentSectionIndex].title}}</span>
                    </ReadHeaderBar>
    <!-- hear-bar end -->
    <!-- <div class="loadding"></div> -->
    <Scroll class="scroll-picture"
            @onScroll="onPictureScroll">
    					<div>
    						<div v-for="(item,index) in content" :key="index" class="item">
    							<img @load="loadImg" v-lazy="item.image" alt="漫画icon">
    						</div>
    						<div v-if="showNextBtn" :class="['next-btn',hasNext?'':'next-hidden']" @click.stop="onNext">下一章</div>
    					</div>
    				</Scroll>
    <!-- 章节列表 -->
    <Scroll v-show="isShowSections"
          class="scroll-list-box"
          @click.stop="onStop">
            <ul class="comic-sections">
              <li v-for="item in currentSections" :key="item.sid" @click.stop="onTap(item.sid)">
                <Tag cname="cate-tag"><span>{{item.title}}</span></Tag>
              </li>
            </ul>
            <div class="scroll-close">
              <span class="btn-close" @click.self="onCloseSections">关闭</span>
            </div>
          </Scroll>
    <!-- 底部菜单栏 -->
    <ReadMenuBar class="menu-bar"
                  @onSwitch="onSwitch"
                  @onPrevious="onPrevious"
                  @onNext="onNext"
                  @onCates="onCates"/>
  </div>
	
</template>

<script>
import {getSections,getComicContent} from '../../api/comic.js'
import {Mixin} from '../../utils/mixin.js'
import Comic from '../common/Comic.vue'
import ReadHeaderBar from '../reader/ReadHeaderBar.vue'
import ReadMenuBar from '../reader/ReadMenuBar.vue'
import Scroll from '../core/scroll.vue'
import Tag from '../common/Tag.vue'

export default {
  mixins: [Mixin],
	components: {
		Comic,
		ReadHeaderBar,
		ReadMenuBar,
		Scroll,
		Tag
	},
	data() {
		return {
			loadImgFirst: false,        //第一张图片加载完成 控制
      content: [],                //本章内容图片数据
      total: 0,                   //本章内容图片总计数
      currentSections: null,      //当前漫画的章节信息
      cid: -1, 										// 漫画id
      isShowSections: false,      //是否显示章节面板
      hasNext:true,            		//控制Swiper显示
      currentSectionIndex: 0,     //当前阅读的章节进度
      showNextBtn: false,         //是否开始显示 下一章 按钮
		}
	},
	created() {
		let params = this.$route.params
    console.log(params)
    if (!params){
      this.$router.go(-1)
    }
    try{
      params = {
        "cid": parseInt(params.cid),
        "sid": parseInt(params.sid)
      }
    }catch{
      this.$router.replace({path:'/404'})
    }
    this.cid = params.cid
    this._getSections()
    this._getComicContent(params)
    this.setShowReadMenuBar(false)
    this.setShowReadHeaderBar(false)
	},
	mounted() {

	},
	methods: {
    loadImg() {
      if (!this.loadImgFirst) {
        this.showNextBtn = true
        this.loadImgFirst = true
      }
      return
    },
		// 获取漫画内容
		_getComicContent(params) {
			if (!params) {
        return
      }
      this.resetData()
      this.saveReadRecord(params)
      getComicContent(params)
        .then(
          res=>{
            this.content = res.images
            this.total = res.total
            this.setCurrentReadProgress(this.currentSectionIndex)
            this.setCurrentReadSID(params.sid)
            //console.log('准备阅读章节:'+ params.sid)
            //console.log('章节: ')
            try {
              this.currentSectionIndex = this.currentSections.findIndex(item=>item.sid==params.sid)
            }catch(e) {
              console.log(e)
            }
            //console.log(this.currentSections)
            this.$router.replace({
              path: `/comic/${this.cid}/${params.sid}`
            })
          },err=>{
          console.log(err)
        })
		},

		// 获取漫画章节信息
		_getSections() {
      //console.log('上次阅读的 cid=' + this.currentReadCID)
      //console.log('当前传入的漫画cid: '+this.cid)
      if(this.cid === this.currentReadCID) {
        this.currentSections = this.currentReadSections
        //console.log(this.currentSections)
      }else {
        getSections(this.cid)
          .then(res=>{
            this.setCurrentReadCID(this.cid)
            this.setCurrentReadSections(res.sections)
            this.currentSections = res.sections
          })
      }
		},

    // 滑动图片
    onPictureScroll(offsetY) {
      //console.log(offsetY)
    },

		// 加载下一章
		onNext() {
      if (this.currentSectionIndex > this.currentSections.length-1) {
        console.log('已经是最后一章了')
        return
      }
      this.currentSectionIndex += 1
			const params = {
        "cid": this.cid,
        "sid": this.currentSections[this.currentSectionIndex].sid
      }
      this._getComicContent(params)
		},

    // 点击上一章按钮
    onPrevious() {
      if (this.currentSectionIndex <= 0) {
        console.log('已经是第一章了')
        return
      }
      this.currentSectionIndex -= 1
      const params = {
        "cid": this.cid,
        "sid": this.currentSections[this.currentSectionIndex].sid
      }
      this._getComicContent(params)
    },

		//点击遮罩弹出控制面板
    tapMask() {
      if (this.isShowSections==true) {return}
      this.showNextBtn = !this.showNextBtn
      this.onReaderCtrPanel()
    },

    // 点击切换横纵向 onSwitch
    onSwitch() {

    },

    // 点击收藏
    onCollect() {

    },

    // 回到主页
    onHome() {
      this.$router.push({path: '/'})
    },

    // 点击展开目录
    onCates() {
      this.isShowSections = true
    },

    // 点击关闭目录
    onCloseSections() {
      this.isShowSections = false
    },

    // 点击章节标签
    onTap(sid) {
      if(!sid) {return}
      let params={
        "cid":this.cid,
        "sid":sid
      }
      this._getComicContent(params)
      this.onCloseSections()
      this.onReaderCtrPanel()
    },

    // 保留阅读记录
    saveReadRecord(params) {
      this.setReadRecords(params)
    },

    resetData() {
      this.content = []
      this.total = 0
      this.currentSectionIndex = 0
      this.showNextBtn = false
      this.loadImgFirst = false
    },

    beforeDestroy() {
      this.setShowReadMenuBar(false)
      this.setShowReadHeaderBar(false)
    }
	}
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';

.reader-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
  .header-bar, .menu-bar {
    z-index: 100;
  }
  
	.scroll-picture {
    z-index: 0;
		.item {
			img{
				max-width: 100%;
				height: auto;
			}
		}
		.next-btn {
			width: 100%;
			height: 50px;
			line-height: 50px;		
			border: 1px solid red;
			text-align: center;
		}
		.next-hidden {
			display: none;
		}
	}

  .scroll-list-box {
    position: absolute;
    bottom: 100px;
    z-index: 157;
    width: 100%;
    background-color: $color-bg-mask-7;
    padding-top: 150px;
    padding-bottom: 10px;
    .scroll-close {
      width: 100%;
      height: 100px;
      position: fixed;
      bottom: 0;
      z-index: 159;
      box-sizing: border-box;
      background-color: $color-bg-mask-7;
      pointer-events: auto;
      @include center;
      .btn-close {
        width: 72px;
        height: 36px;
        color: $color-text-f;
        @include center;
        background: $color-text-7;
        border-radius: 16px;
        pointer-events: auto;
      }
    }
    .comic-sections {
      width: 100%;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      padding: 0 10px;
      color: $color-text-9;
      overflow: hidden;
      li {
        width: 22%;
        height: 30px;
        line-height: 30px;
        margin-top: 8px;
        margin-right: 3%;
        text-align: center;
        background-color: $color-bg-mask;
        box-sizing: border-box;
        border:1px solid $color-text-7;
        border-radius: 2px;
        font-size: $font-size-14;
        overflow: hidden;
        .cate-tag {
          box-sizing: border-box;
          padding: 1px 6px 3px 6px;
        }
      }
    }
  }
}
</style>
